<template>
  <view class="publishPopup_layout" :style="{bottom:bottom+'px'}" @click.stop="closeSharePublishFn">
    <div class="dynamic_box" :class="{'dynamic_openGroup_box':sharePublishData.type==2}" :style="{'width: 522rpx;': sharePublishData.type==4}">
       <!-- 1动态发布成功图片 -->
      <div class="dynamic_title" v-if="sharePublishData.type==1"><image class="img_box" mode="aspectFill" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/bgImg/dynamic_release_success.png" alt=""></div>
      <!-- 2开团成功图片 -->
      <div class="dynamic_openGroup_title" v-if="sharePublishData.type==2"><image class="img_box" mode="aspectFill" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/open_groups_success.png" alt=""></div>
      <!-- 4帮卖成功图片，该类型有底下邀请朋友参团按钮 -->
      <div class="dynamic_openGroup_title" v-if="sharePublishData.type==4"><image class="img_box" mode="aspectFill" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/helpSell_success.png" alt=""></div>
      <div class="dynamic_mgs_box">
        <div class="mp_name_box"><image class="img_box" mode="aspectFill" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/logo2_icon.png"/><span>速速团</span></div>
        <div class="share_title_box">{{sharePublishData.title}}</div>
        <image class="share_img_box" mode="aspectFill" :src="sharePublishData.url"/>
        <div class="share_mini_program">
          <image class="mini_program_icon" mode="aspectFill" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/share6_icon.png" />
          <span>小程序</span>
        </div>
      </div>
      <image class="gold_img_box" v-if="sharePublishData.type==2||sharePublishData.type==4" mode="aspectFill" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/gold_img.png"/>
      <button open-type="share" id="publishId" class="share_btn" v-if="sharePublishData.type==1">邀请朋友来围观</button>
      <button open-type="share" id="publishId" class="share_openGroup_btn" v-if="sharePublishData.type==2">立即邀请朋友参团</button>
      <!-- 帮卖成功 -->
      <button class="share_openGroup_btn" v-if="sharePublishData.type==4" @click.stop="$emit('customInvite', sharePublishData)">
        立即邀请朋友参团
      </button>
      <!-- 给他人推荐帮卖 -->
      <button class="share_openGroup_btn" v-if="sharePublishData.type==5" open-type="share" id="othersRecommend">
        立即推荐给好友
      </button>
    </div>
  </view>
</template>

<script>
export default {
  props: {
    // 弹窗对象type：1--邀请朋友，2--开团
    sharePublishData: {
      type: Object,
      default: () => {},
      required: true
    },
    bottom: {
      type: [Number, String],
      default: 0
    }
  },
  methods: {
    closeSharePublishFn () {
      // this.show = false
      this.$emit('closeSharePublishFn', false)
    }
  },
}
</script>

<style lang="scss" scoped>
.publishPopup_layout {
  position: fixed;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  left: 0;
  //bottom: 0;
  top: 0;
  right: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.7);
  .dynamic_box {
    width: 520rpx;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-40%);
    &.dynamic_openGroup_box {
      width: 526rpx;
    }
    .dynamic_title {
      width: 100vw;
      height: 706rpx;
      position: absolute;
      top: -200rpx;
      left: -15vw;
      z-index: -1;
      .img_box {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .dynamic_mgs_box {
      width: 100%;
      padding: 30rpx 20rpx 20rpx 14rpx;
      background-color: #fff;
      box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(255, 208, 13, 0.32);
      border-radius: 16rpx;
      position: relative;
      z-index: 9;
      .mp_name_box {
        display: flex;
        align-items: center;
        .img_box {
          width: 44rpx;
          height: 44rpx;
          display: block;
          margin-right: 16rpx;
          border-radius: 50%;
        }
        span {
          font-size: 24rpx;
          font-weight: bolder;
          color: rgba(0, 0, 0, 0.6);
        }
      }
      .share_title_box {
        margin-top: 12rpx;
        width: 100%;
        font-size: 32rpx;
        line-height: 48rpx;
        color: #323232;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .share_img_box {
        width: 480rpx;
        height: 384rpx;
        display: block;
        margin: 20rpx auto 20rpx;
        border-radius: 4rpx;
        overflow: hidden;
      }
      .share_mini_program {
        display: flex;
        align-items: center;
        border-top: 2rpx solid #dcdee0;
        color: rgba(0, 0, 0, 0.6);
        font-size: 24rpx;
        padding-top: 18rpx;
        .mini_program_icon {
          width: 24rpx;
          height: 22rpx;
          margin-right: 8rpx;
        }
      }
    }
    .share_btn {
      position: relative;
      z-index: 9;
      display: block;
      width: 100%;
      margin-top: 28rpx;
      font-size: 48rpx;
      height: 96rpx;
      color: #fff;
      text-align: center;
      line-height: 96rpx;
      box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(255, 208, 13, 0.32);
      background: linear-gradient(-90deg, #E44435 0%, #E33494 100%);
      border-radius: 54rpx;
    }
    .share_openGroup_btn {
      width: 100%;
      height: 96rpx;
      background: linear-gradient(0deg, #FCED2D 0%, #FFCD09 100%);
      box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(255, 208, 13, 0.32);
      border-radius: 54rpx;
      font-weight: bolder;
      font-size: 48rpx;
      color: #D85E0A;
      text-align: center;
      line-height: 96rpx;
      margin-top: 40rpx;
      text-shadow: 0rpx 2rpx 2rpx #FEF06C;
    }
    .dynamic_openGroup_title {
      position: absolute;
      width: 100vw;
      height: 432rpx;
      top: -300rpx;
      left: -15vw;
      z-index: -1;
      .img_box {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    .gold_img_box {
      position: absolute;
      bottom: 136rpx;
      left: -15vw;
      height: 200rpx;
      width: 100vw;
      z-index: -1;
    }
  }
}
</style>